<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        html {
            height: 100%;
        }
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #content {
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="content"></div>
</body>
<script src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=WoOAIHpkY0txhCgYhHZDMlqFe5FvRBMN"></script>
</html>
<script>
    var map = new BMapGL.Map('content')
    var point = new BMapGL.Point(114.282894,35.683904)
    map.centerAndZoom(point,15)
    map.enableScrollWheelZoom()

    // 添加缩放控件
    let zom = new BMapGL.ZoomControl({
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        offset: new BMapGL.Size(30,20)
    })
    // 缩放组件到地图中
    map.addControl(zom)

    // 添加比例尺
    let scale = new BMapGL.ScaleControl({
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        offset: new BMapGL.Size(70,20)
    })
    map.addControl(scale)


    // 生成一个图标
    let url = 'https://m.360buyimg.com/babel/jfs/t1/32403/22/14829/3699/5cbf0674E04723693/caa83ce9b881cd24.png'
    let myicon = new BMapGL.Icon(url,new BMapGL.Size(20,20), {
        anchor: new BMapGL.Size(0,0)
    })

    const mak = new BMapGL.Marker(new BMapGL.Point(114.284084,35.683926), {
        icon: myicon,
        offset: new BMapGL.Size(-30,30)
    })
    map.addOverlay(mak)

    // 设置矩形
    let a = new BMapGL.Point(114.281785,35.684629)
    let b = new BMapGL.Point(114.285737,35.683867)
    let c = new BMapGL.Point(114.286168,35.681287)

    const poly = new BMapGL.Polygon([a,b,c], {
        strokeColor: '#f69',
        strokeWeight: 5,
        strokeOpacity: 6,
        fillColor: 'purple',
        fillOpacity: 0.3
    })
    map.addOverlay(poly)

    // 添加文本
    let str = `<div>小付的家</div>`
    const text = new BMapGL.Label(str, {
        position: new BMapGL.Point(114.282791,35.681405),
        offset: new BMapGL.Size(-60,-50)
    })
    text.setStyle({
        width:'50px',
        height: '20px',
        border: '1px solid #ccc',
        backgroundColor: 'rgba(0,0,5,.5)',
        color: '#fff'
    })
    map.addOverlay(text)
</script>